<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style4.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <nav>
        <a href="#" class="logo"><svg t="1617548994159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1294" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                <defs>
                </defs>
                <path d="M502.272 948.224l-427.008-427.008c-1.536-1.536-1.536-3.584 0-4.608l427.008-427.008c1.536-1.536 3.584-1.536 4.608 0l427.008 427.008c1.536 1.536 1.536 3.584 0 4.608L506.88 948.224c-1.536 1.024-3.584 1.024-4.608 0z" fill="#C9E6FF" p-id="1295" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#272b2c;"></path>
                <path d="M504.32 956.416c-2.56 0-5.632-1.024-7.68-3.072l-427.008-427.008c-4.096-4.096-4.096-11.264 0-15.36L496.64 83.456c4.096-4.096 11.264-4.096 15.36 0l427.008 427.008c4.096 4.096 4.096 11.264 0 15.36L512 953.344c-2.048 2.048-4.608 3.072-7.68 3.072z m-420.864-437.76l420.864 420.864 420.864-420.864L504.32 97.28l-420.864 421.376z" fill="#2E66FF" p-id="1296" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#002fb0;"></path>
                <path d="M497.152 97.792l13.312 414.208 395.264-395.264c5.632-5.632 2.048-15.872-6.144-16.384L506.88 88.064c-5.632-0.512-9.728 4.096-9.728 9.728z" fill="#FFFFFF" p-id="1297" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#181a1b;"></path>
                <path d="M503.296 529.92l-13.824-432.128c0-4.608 1.536-9.216 5.12-12.8s7.68-5.12 12.8-5.12l392.704 12.8c7.168 0 12.8 4.608 15.36 10.752 2.56 6.656 1.024 13.312-3.584 18.432l-408.576 408.064z m1.536-432.64l12.8 396.8 382.464-382.464c0.512-0.512 0.512-1.024 0.512-2.048-0.512-0.512-1.024-1.024-1.536-1.024l-392.704-12.8c-0.512 0-1.024 0.512-1.536 0.512v1.024z" fill="#2E66FF" p-id="1298" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#002fb0;"></path>
                <path d="M522.24 946.688L508.416 532.48l-395.264 395.264c-5.632 5.632-2.048 15.872 6.144 16.384l392.704 12.8c5.632 0 10.24-4.608 10.24-10.24z" fill="#FFFFFF" p-id="1299" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#181a1b;"></path>
                <path d="M512.512 964.096h-0.512l-392.704-12.8c-7.168 0-12.8-4.608-15.36-10.752-2.56-6.656-1.024-13.312 3.584-18.432l407.552-407.552 13.824 432.128c0 4.608-1.536 9.216-5.12 12.8-2.048 3.072-6.656 4.608-11.264 4.608z m-11.264-413.696l-382.464 382.464c-0.512 0.512-0.512 1.024-0.512 2.048 0.512 0.512 1.024 1.024 1.536 1.024l392.704 12.8c0.512 0 1.024-0.512 1.536-0.512 0 0 0.512-0.512 0.512-1.536l-13.312-396.288z" fill="#2E66FF" p-id="1300" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#002fb0;"></path>
                <path d="M931.84 509.952l-414.208 13.312 395.264 395.264c5.632 5.632 15.872 2.048 16.384-6.144l12.8-392.704c0-5.632-4.608-10.24-10.24-9.728z" fill="#FFB5EC" p-id="1301" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#5f0047;"></path>
                <path d="M919.552 929.28c-4.608 0-8.704-1.536-11.776-5.12l-407.552-407.552 432.128-13.824c4.608 0 9.216 1.536 12.8 5.12s5.12 8.192 5.12 12.8l-12.8 392.704c0 7.168-4.608 12.8-10.752 15.36-3.072 0-5.12 0.512-7.168 0.512z m-384-398.848l382.464 382.464c0.512 0.512 1.024 0.512 2.048 0.512 0.512-0.512 1.024-1.024 1.024-1.536l12.8-392.704c0-0.512-0.512-1.024-0.512-1.536 0 0-1.024-0.512-1.536-0.512l-396.288 13.312z" fill="#2E66FF" p-id="1302" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#002fb0;"></path>
                <path d="M76.8 526.848l414.208-13.312-394.752-395.264c-5.632-5.632-15.872-2.048-16.384 6.144L67.072 517.12c0 5.632 4.096 10.24 9.728 9.728z" fill="#FFF152" p-id="1303" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#9b8e00;"></path>
                <path d="M76.8 534.528c-4.608 0-8.704-2.048-12.288-5.12-3.584-3.584-5.12-8.192-5.12-12.8l12.8-392.704c0-7.168 4.608-12.8 10.752-15.36 6.656-2.56 13.312-1.024 18.432 3.584l407.552 407.552-432.128 13.824v1.024z m12.8-411.136h-0.512c-0.512 0.512-1.024 1.024-1.024 1.536l-12.8 392.704c0 0.512 0.512 1.024 0.512 1.536 0 0 0.512 0.512 1.536 0.512L474.112 506.88 90.624 123.904c-0.512-0.512-1.024-0.512-1.024-0.512z" fill="#2E66FF" p-id="1304" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#002fb0;"></path>
            </svg></a>
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
        </ul>
    </nav>
    <div class="button">
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>start
        </a>
    </div>
    <script>
        window.addEventListener('scroll', function() {
            const nav = document.querySelector("nav");
            nav.classList.toggle('sticky', window.scrollY > 0);
        })
    </script>
</body>

</html>
